<style>
    .layui-input-block{
        margin-left: 10px;
    }
    .layui-input, .layui-textarea {
        display: inline;
    }
</style>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
    <legend>商品基本信息</legend>
</fieldset>
<form class="layui-form" action="<?=url('goods/add')?>">
    <table class="layui-table">
        <colgroup>
            <col width="100">
            <col>
        </colgroup>
        <tbody>
        <tr>
            <th>商品分类</th>
            <td>
                <div class="layui-input-block" style="width: 500px;">
                    <?php foreach($cat_list as $k=>$v):?>
                        <?php if($k != 0):?>-><?php endif;?><?=$v["cat_title"]?>
                    <?php endforeach;?>
                    <div class="layui-btn layui-btn-sm" onclick="setwidth()">编辑</div>
                </div>
                <input  type="hidden" value="<?=$v['id']?>" name="cat_id"/>
            </td>
        </tr>
        <tr>
            <th>商品名称</th>
            <td>
                <div class="layui-input-block" style="width: 500px;">
                    <input type="text" name="title" required autocomplete="off" placeholder="请输入商品标题"
                           class="layui-input">
                    <p></p>
                </div>
            </td>
        </tr>
        <tr>
            <th>关键词</th>
            <td>
                <div class="layui-input-block" style="width: 500px;">
                    <input type="text" name="keyword"  placeholder="请输入关键词"
                           class="layui-input">
                    <p></p>
                </div>
            </td>
        </tr>
        <tr>
            <th>描述概要</th>
            <td>
                <div class="layui-input-block" style="width: 500px;">
                    <textarea name="description" placeholder="请输入描述" class="layui-textarea"></textarea>
                </div>
            </td>
        </tr>
        <tr>
            <th>价格</th>
            <td>
                <div class="layui-input-block">
                    <div class="layui-input-inline" style="width: 100px;">
                        <input type="text" name="price" placeholder="￥" required class="layui-input">
                    </div>
                    <p></p>
                </div>
            </td>
        </tr>
        <tr>
            <th>市场价</th>
            <td>
                <div class="layui-input-block">
                    <div class="layui-input-inline" style="width: 100px;">
                        <input type="text" name="market_price" placeholder="￥" autocomplete="off" class="layui-input">
                    </div>
                    <p></p>
                </div>
            </td>
        </tr>
        <tr>
            <th>封面图</th>
            <td>
                <div class="layui-input-block">
                    <button type="button" class="layui-btn" id="myupimg">
                        <i class="layui-icon">&#xe67c;</i>上传图片
                    </button>
                    <input type="hidden" name="pic" value="" />
                    <div style="display:inline-block;position:relative;">
                        <span style="position:absolute;right:-15px; top:-15px;cursor:pointer;color:#ccc;font-size:24px;display:none;" id="closeimg">x</span>
                        <img id="pic" height=50 src="" />
                    </div>
                </div>
            </td>
        </tr>
        <tr>
            <th>商品相册</th>
            <td>
                <div class="layui-input-block">
                    <div class="layui-upload">
                        <button type="button" class="layui-btn" id="multiplepics">
                            <i class="layui-icon">&#xe67c;</i>上传多图
                        </button>
                        <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;">
                            预览图：
                            <div class="layui-upload-list" id="multiplepicsshow"></div>
                        </blockquote>
                    </div>
                </div>
            </td>
        </tr>
        <tr>
            <th>商品详情</th>
            <td>
                <script id="container" name="content" type="text/plain"></script>

            </td>
        </tr>
        <tr>
            <th>商品属性</th>
            <td>
                <div class="layui-input-block">
                    <script id="attrContent" name="attr" type="text/plain"></script>
                </div>
            </td>
        </tr>
        <input type="hidden" value="[]" id="spec" name="spec"/>
        <tr>
            <th>规格</th>
            <td>
                <div class="layui-btn layui-btn-sm" onclick="addSpec(this)">添加规格</div>
                <dl>
                <?php foreach($spec_list as $k=>$v): ?>
                    <dt><input  class='layui-input' type="text" name="attr_name[]" style="width: 100px" value="<?=$v['title']?>"></dt>
                    <dd><input type="text" name="attr_value[]" class="layui-input" style="width: 300px"></dd>
                <?php endforeach;?>
                </dl>
                <div class="layui-btn layui-btn-sm" onclick="create_attr()">生成规格预览</div>
            </td>
        </tr>
        <tr>
            <th>规格预览</th>
            <td id="attr_view">

            </td>
        <tr>
        <tr>
            <th>运费</th>
            <td>
                <div class="layui-input-block">
                    <div class="layui-input-inline" style="width: 100px;">
                        <input type="text" name="postage" placeholder="￥" autocomplete="off" class="layui-input">
                    </div>
                    <p></p>
                </div>
            </td>
        </tr>
        <tr>
            <th></th>
            <td>
                <button  class="layui-btn" lay-submit lay-filter="myform">保存</button >
            </td>
        </tr>
        </tbody>
    </table>
</form>
<script>
    layui.use(['form'], function(){
        var $ = layui.$
            ,form = layui.form;
        form.render();
        var ue = UE.getEditor('container');
        var ac = UE.getEditor('attrContent');
    });
    $(function(){
        setTimeout("setwidth()",1000);
    })
    //强制设置宽度，防止编辑器让表格变形
    function setwidth(){
        $(".ym_main").addClass("w100");
    }


    /**
     * 添加规格
     * @param e
     */
    function addSpec(e) {
        var contents = "<dt><input type='text' style='width: 100px'  class='layui-input' name='attr_name[]' value='颜色'></dt><dd><input type='text' name='attr_value[]' class='layui-input' style='width: 300px'></dd>";
        $(e).next().append(contents);
    }
    /**
     * 生成规格预览
     */
    function create_attr(){
        var attr_list = {};//规格名称列表
        $("input[name='attr_name[]']").each(function (i,e) {
            attr_list[i] = $(e).val();
        })
        //规格值列表
        var value_list = {};
        $("input[name='attr_value[]']").each(function (i,e) {
            value_list[i] = $(e).val();
        })
        $.ajax({
            url:"<?=url('goodsprice/countattr')?>",
            method:'post',
            dataType:'json',
            data:{attr_list:attr_list,value_list:value_list},
            success:function(rs){

                data =  { //数据
                    "title":"规格预览"
                    ,"attr_list":rs.data.spec
                    ,"attr_value_list":rs.data.arr
                };
                $("#spec").val(JSON.stringify(rs.data.spec));
                layui.use('laytpl', function(){
                    var laytpl = layui.laytpl;
                    var getTpl = attr_script.innerHTML,view = document.getElementById('attr_view');
                    laytpl(getTpl).render(data, function(html){
                        view.innerHTML = html;
                    });
                });
            }
        });

    }

</script>
<script type="text/html" id="attr_script">
    <table class="layui-table">
        <thead>
        <tr>
            {{#  layui.each(d.attr_list, function(index, item){ }}
                <th>{{ index }}</th>
            {{#  }); }}
            <th>库存</th>
            <th>价格</th>
        </tr>
        </thead>
        <tbody>
            {{#  layui.each(d.attr_value_list, function(index, item){ }}
            <tr>
                {{# var arr = item.split('_');}}
                {{# layui.each(arr, function(i, e){ }}
                <td>{{ e }}</td>
                {{#  }); }}
                <td><input type="text" style='width: 100px'  class='layui-input' name="{{ item }}_stock[]" value="100"/></td>
                <td><input type="text" style='width: 100px'  class='layui-input' name="{{ item }}_price[]" value="100"/></td>
            </tr>
            {{#  }); }}
        </tbody>
    </table>
</script>
